<template>
  <!-- 图片上传插件 -->
  <div class="uploadImg">
    <el-upload
      :action="action"
      :list-type="listType"
      :multiple="multiple"
      :on-preview="handleClickPic"
      :on-remove="handleRemove"
      :before-upload="beforeAvatarUpload"
      :limit="limitNumber"
      :headers="headers"
      :on-success="uploadSuccess"
      :on-change="uploadChange"
      :data="data"
      :accept="accept"
      :file-list="fileList"
      :class="{ hide_upload: hideUpload }"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false" :append-to-body="true"><img width="100%" :src="dialogImageUrl" alt="dialogImageUrl" /></el-dialog>
  </div>
</template>

<script>
import CONFIG from '@/config/index.js';
export default {
  name: 'uploadImg',
  components: {},
  props: {
    action: {
      //上传地址
      type: String,
      default: `${CONFIG.domain}/yun/file/upload`
    },
    listType: {
      //文件列表的类型，text/picture/picture-card
      type: String,
      default: 'picture-card'
    },
    data: {
      // 上传时附带的额外参数
      type: Object,
      default: () => {}
    },
    multiple: {
      //是否上传多文件
      type: Boolean,
      default: true
    },
    limitNumber: {
      type: Number,
      default: 1
    },
    limitSize: {
      //限制上传大小，默认0则不限制大小，单位M
      type: Number,
      default: 0
    },
    accept: {
      // 接受上传的文件类型
      type: String,
      default: 'image/jpeg,image/gif,image/png,image/bmp'
    },
    value: {}
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      headers: {
        token: sessionStorage.getItem('token')
      }
    };
  },
  computed: {
    fileList(){
      if(typeof(this.value) === "string"){
        return this.value ? [{url: this.value}] : []
      }else if(typeof(this.value) === "undefined"){
        return []
      }else{
        return this.value.map(url => ({ url }))
      }
    },
    hideUpload(){
      // 是否隐藏上传按钮
      if(typeof(this.value) === "string"){
        return this.value.length > 0
      }else if(typeof(this.value) === "undefined"){
        return false
      }else{
        return this.value.length >= this.limitNumber
      }
    }
  },
  methods: {
    beforeAvatarUpload(file) {
      //图片提交上传之前做筛选
      if (!this.limitSize) {
        return true;
      }
      const flagSize = file.size / 1024 / 1024 < this.limitSize;
      if (!flagSize) {
        this.$notify.error('上传图片大小不能超过 2MB');
      }
      return flagSize;
    },
    uploadSuccess(res, file, fileList) {
      // 上传成功
      if(typeof(this.value) === "string"){
        this.$emit('input', res.data)
      }else if(typeof(this.value) === "undefined"){
        this.$emit('input', res.data)
      }else{
        this.$emit('input', [...this.value, res.data])
      }
    },
    uploadChange(file, fileList) {
      // console.log(file, fileList);
    },
    handleRemove(file, fileList) {
      if(typeof(this.value) === "string"){
        this.$emit('input', "")
      }else{
        let list = this.value
        this.value.some((item, index) => {
          if(item === file.url){
            list.splice(index,1)
          }
          return item === file.url
        })
        this.$emit('input', list)
      }
    },
    handleClickPic(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="scss">
.uploadImg {
  .hide_upload {
    .el-upload--picture-card, .el-upload--text{
      display: none;
    }
  }
  .el-upload-list__item {
    // 删除自带回显动画
    transition: none !important;
  }
}
</style>
